<template>
	<view class="body">
		<view class="active">
			<uni-nav-bar background-color="#61a0f0" :border="false" left-icon="left" left-text="返回"  right-text=""  title="用户注册"  color="#fff" />
			<view  v-show="!isNext" class="souuso">
				<view class="bbu">
				<input type="text" v-model="form.mobile" placeholder="请输入手机号" />
				</view>
				<view class="bbo">
					<view class="vako">
						<input type="text" v-model="form.code" placeholder="请输入验证码" />
					</view>
					<view class="bg" v-show="!isShowtime" @click="sendCode">
						验证码
					</view>
					<view class="bg" v-show="isShowtime">
						{{time}}
					</view>
				</view>
			</view>
			
			<view  v-show="isNext" class="souuso">
				<view class="bbu">
					<input type="text" v-model="form.pass" placeholder="请输入密码" />
				</view>
				<view class="bbo">
					<view class="vako">
						<input type="text" v-model="form.repass" placeholder="再次输入密码" />
					</view>
					
				</view>
			</view>
		</view>

	<view class="xie">
		<view class="number">
			<label class="radio">
						<checkbox @click="isAgree=!isAgree" style="transform:scale(0.7)" />
			</label>
		</view>
		 我已阅读并同意 <view class="lan">《用户使用协议》
			
		</view>和 <view class="lan">《隐私政策》
			
		</view>
	</view>
	<view class="xia" v-show="!isNext" @click="next">
		下一步
	</view>
	<view class="xia" v-show="isNext" @click="regfun">
		确认提交
	</view>
	</view>

</template>

<script>
import {member,memberloginByCode,reg} from '@/apis/index.js'
import {mobileReg,codeReg,passReg} from '../../utils/verfy'
	export default {
		data() {
			return {
				isNext:false,
				form:{
					mobile:'13764598520',
					code:'',
					pass:'',
					repass:''
				},
				isShowtime:false,
				time:5,
				isAgree:false
			}
		},
		methods: {
			// 验证码
			async sendCode(){
				let res = await member({mobile: this.form.mobile})
				console.log('验证码',res);
				this.isShowtime = true
				this.timer = setInterval(()=>{  
					this.time--
					if(this.time ==0){
						this.isShowtime = false
						this.time = 5
						// 清除定时器
						clearInterval(this.timer)
					}
				},1000)
			},
			// 注册
			async next(){
				if(!this.isAgree){
					return uni.showToast({
						title:'请勾选协议',
						icon:'error'	
					})
				} 
				let res = await memberloginByCode(this.form)
				console.log('注册',res);
				this.isNext = true	
			},
			// 密码
			async regfun(){
				if (!this.form.pass) return this.$message.error('密码不能为空')
				if (!passReg.test(this.form.pass)) return this.$message.error('最少6位，至少1个大写字母，一个是数字，一个特殊字符')
				if (!this.form.repass) return this.$message.error('确认密码不能为空')
				if(this.form.repass!=this.form.pass) return this.$message.error('两次密码不一致')
				delete this.form.code
				delete this.form.repass
				let res = await reg(this.form)
				console.log('登录',res);
				uni.setStorageSync('token', res.data.token)
				uni.setStorageSync('member', res.data)
				uni.showToast({
					title:'注册成功'	
				})
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
	
</script>

<style lang="less">
.body{
	width: 100%;
	height: 1500rpx;
	background-color: #f4f5fa;
}
.active{
	width: 100%;
	height: 350rpx;
		background-image: url(https://s2.loli.net/2024/11/14/cbP1uX5NLFIYToR.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
}
.souuso{
	width: 80%;
	height: 317rpx;
	background-color: #fff;
	/* margin-top: 200rpx; */
	margin: 150rpx auto;
	border-radius: 30rpx;
	overflow: hidden;
		padding: 0 30rpx;
}
.bbu{
	width: 100%;
	height: 79rpx;
	/* background-color: antiquewhite; */
	border-bottom: 1px solid #eee;
	margin-top: 79rpx;
}
.bbu>input{
	font-size: 28rpx;
}
input{
	width: 100%;
	height: 79rpx;
	padding-left: 38rpx;
}
.bbo{
	display: flex;
	width: 100%;
	height: 79rpx;
	/* background-color: antiquewhite; */
	/* border-bottom: 1px solid #eee; */
	margin-top: 20rpx;
}
.vako>input{
	font-size: 28rpx;
}
input{
	width: 100%;
	height: 79rpx;
	padding-left: 38rpx;
}
.bg{
	width: 161rpx;
	height: 79rpx;
	/* background-color: aquamarine; */
	font-size: 29rpx;
	line-height: 79rpx;
	color: #255fb0;
	margin-left: 80rpx;
}
.xie{
	display: flex;
	width: 601rpx;
	height: 44rpx;
	/* background-color: aqua; */
	margin: 278rpx auto 0;
	font-size: 21rpx;
	line-height: 44rpx;
	color: #b1b1b1;
}
.lan{
	
	color: #3293fe;
}
.xia{
	width: 498rpx;
	height: 100rpx;
	background-color: #5da7f0;
	margin: 80rpx auto;
	font-size: 33rpx;
	text-align: center;
	line-height: 100rpx;
	border-radius: 50rpx;
	color: #fff;
}
.number{
	width: 30rpx;
	height: 30rpx;
	/* background-color: #255fb0; */
	margin-right: 25rpx;
	
}
</style>
